<template>
  <div id="item-bank" class="jx-content">
    <!-- 导入试题弹出框 -->
    <el-dialog class="dialog-import-questions" title="导入试题" :visible.sync="dialogImportQuestions" width="30%">
      <div class="dialog-content">
        <el-radio v-model="dialogImportQuestionsRadio" label="1">题库中导入</el-radio>
        <el-radio v-model="dialogImportQuestionsRadio" label="2">Excel导入</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogImportQuestionsSubmit();dialogImportQuestions = false">确 定</el-button>
        <el-button class="button-style" @click="dialogImportQuestions = false">取 消</el-button>
        <br>
      </span>
    </el-dialog>

    <!-- 预览弹出框 -->
    <el-dialog width="850" class="dialog-questions" title="试题预览" :visible.sync="dialogQuestion">
      <div class="dialog-content">
        <div class="question-title" v-html="rowData.content"></div>
        <div v-if="rowData.questionType === 1" v-for="(item,index) in rowData.answer" :key="index" class="question-chose">
          <span>{{ answerChose[index] }}：</span>
          <span class="question-flex" v-html="item.content"></span>
        </div>
        <div class="question-answer">答案：
          <span class="chose" v-html="answerTrue"></span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogQuestion = false">确 定</el-button>
      </span>
    </el-dialog>
    <div class="search-box fl">
      <el-form :inline="true" ref="searchForm" :model="searchForm" label-width="80px">
        <el-form-item label="关键词">
          <el-input v-model="searchForm.keyWord"></el-input>
        </el-form-item>
        <el-form-item label="章节">
          <el-select :clearable="true" v-model="chapterMessage" placeholder="请选择" @change="getchapterModel">
              <el-option v-for="(item,index) in chapterList" :key="index" :label="item.chapterName" :value="item.chapterId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select :clearable="true" v-model="questionTypeMessage" placeholder="请选择" @change="getTopicModel">
              <el-option v-for="(item,index) in questionTypeList" :key="index" :label="item.message" :value="item.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="button-style" @click="getQuestionList">搜 索</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-group fr">
      <el-form :inline="true">
        <el-form-item>
          <router-link class="button-style" to="/MyCourses/Examination/AddChoice/AddChoiceQuestion">添加试题</router-link>
        </el-form-item>
        <el-form-item>
          <div class="button-style" @click="dialogImportQuestions = true">导入试题</div>
        </el-form-item>
        <el-form-item>
          <div class="button-style" @click="delQuestion">批量删除</div>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="questionList" style="width: 100%" @selection-change="delChoseList">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="content" label="试题题目" width="180">
        <template slot-scope="scope">
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column>
      <el-table-column prop="questionTypeMessage" label="试题类型" width="180"></el-table-column>
      <el-table-column prop="chapterName" label="章节"></el-table-column>
      <el-table-column prop="questionOrigin" label="来源"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="editQuestion(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="dialogQuestionShow(scope.row)" type="text" size="small">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pager.pageNum" :page-size="pager.pageSize" :total="pager.total" layout="total, prev, pager, next, jumper"></el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
export default {
  data() {
    return {
      //导入试题弹出框
      dialogImportQuestions: false,
      dialogImportQuestionsRadio: "1",
      //试题预览
      dialogQuestion: false,
      searchForm:{
        //当前页
        pageNum:1,
        //每页显示条数
        //pageSize:10,
        //关键词
        keyWord:'',
        //章节id
        chapterId:0,
        //题型序号
        questionType:0,
      },
      //题目类型名称
      questionTypeMessage:'',
      //题目类型数组
      questionTypeList: [],
      //章节名称
      chapterMessage:'',
      //章节数组
      chapterList:[],
      //table列表
      questionList: [],
      //列表分页
      pager: {
        pageNum: 0, //当前页码
        pageSize: 10, //页面大小
        pages: 0, //总记录条数
        total: 0 //总页码数
      },
      //table弹出层
      rowData: "",
      //试题答案选项
      answerChose: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      //试题正确答案
      answerTrue: "",
      //删除试题id数组
      delQuestionList: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getQuestionList();
      this.getTopicSelected();
    },
    //导入试题弹出关闭
    dialogImportQuestionsClose() {},
    //导入试题弹出确定
    dialogImportQuestionsSubmit() {
      if (this.dialogImportQuestionsRadio == 1) {
        this.$router.push({ path: "/MyCourses/Examination/ItemBankImport" });
      } else {
        this.$router.push({ path: "/MyCourses/Examination/ExcelImport" });
      }
    },
    //删除试题
    delQuestion() {
      var that = this;
      axios
        .delete("/tes/course/1/businessType/1/question-repository/question", {
          data: that.delQuestionList
        })
        .then(function(res) {
          console.log("成功1");
          console.log(res, 112233);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "删除成功",
                type: "success"
              });
              that.getQuestionList();
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //选中checkbox
    delChoseList(val) {
      var that = this;
      that.delQuestionList = [];
      $.each(val, function(i, d) {
        that.delQuestionList.push(d.id);
      });
      //console.log(that.delQuestionList);
    },
    //修改题目
    editQuestion(row){
      //1选择 addChoiceQuestion
      //2判断 addJudge
      //3填空 addFillInTheBlanks
      //4简答 AddShortAnswerQuestions
      //5编程 addChoiceQuestion
      //6实验 AddExperimental
      let val = Number(row.questionType);
      switch (val) {
        case 1:
          this.$router.push({ path: "/addChoiceQuestion" });
          break;
        case 2:
          this.$router.push({
            path: "/addJudge",
            //路由传参 用this.$route.params.id接收
            name:'AddJudge',
            params: {
              row: row
            }
          });
          break;
        case 3:
          this.$router.push({ path: "/addFillInTheBlanks" });
          break;
        case 4:
          this.$router.push({ path: "/AddShortAnswerQuestions" });
          break;
        case 5:
          this.$router.push({ path: "/addJudge" });
          break;
        case 6:
          this.$router.push({ path: "/addExperimental" });
          break;
        default:
          console.log(1234);
      }
      console.log(row);
    },
    //点击预览按钮
    dialogQuestionShow(row) {
      this.dialogQuestion = true;
      console.log(row);
      this.rowData = row;
      //添加答案

      let answer = row.answer;
      this.answerTrue = "";
      //选择题
      if (row.questionType === 1) {
        //遍历找出正确答案选项
        for (let x in answer) {
          console.log(answer[x].isCorrect);
          if (answer[x].isCorrect) {
            this.answerTrue += this.answerChose[x];
          }
        }
      }
      //判断题
      if (row.questionType === 2) {
        if (answer[0].isCorrect) {
          this.answerTrue = "正确";
        } else {
          this.answerTrue = "错误";
        }
      }
      //填空题
      if (row.questionType === 3) {
        this.answerTrue = answer[0].content;
      }
    },
    //获取题目类型
    getTopicModel(val) {
      this.searchForm.questionType = val;
    },
    //获取章节
    getchapterModel(val){
      this.searchForm.chapterId = val;
    },
    handleSizeChange() {},
    //翻页
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getQuestionList();
    },
    //获取题目列表
    getQuestionList() {
      var that = this;
      axios
        .get("/tes/course/1/businessType/1/question-repository/question",{params:that.searchForm})
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              let questionList = res.data.data.content;
              let pager = res.data.data;
              //填空题替换(+)为（）
              $.each(questionList, function(i, d) {
                if (d.questionType === 3) {
                  let str = d.content;
                  var result = str.replace(/\(\+\)/g, "（）"); //把(+)替换成()
                  d.content = result;
                }
              });
              //列表赋值
              that.questionList = questionList;
              //分页赋值
              that.pager.pageNum = pager.pageNum; //当前页码
              that.pager.pageSize = pager.pageSize; //页面大小
              that.pager.pages = pager.pages; //总记录条数
              that.pager.total = pager.total; //总页码数
              console.log(pager, 666);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //获取题目类型和章节下拉
    getTopicSelected() {
      var that = this;
      axios
        .get("/tes/course/1/businessType/1/question-repository/dropdown-list")
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.message);
              //赋值题目类型
              let questionTypeList = res.data.data.questionTypeList;
              that.questionTypeList = questionTypeList;
              //赋值章节列表
              let chapterList = res.data.data.chapterList;
              that.chapterList = chapterList;
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#item-bank {
  width: 1200px;
  margin: 50px auto;
  .dialog-questions {
    .dialog-content {
      padding: 20px 64px 0;
      .question-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 20px;
      }
      .question-chose {
        font-size: 14px;
        line-height: 24px;
        padding: 6px 0;
        display: flex;
        .question-flex {
          flex: 1;
        }
      }
      .question-answer {
        font-size: 16px;
        .chose {
          font-size: 18px;
          color: #385899;
          vertical-align: -2px;
        }
        margin-top: 20px;
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
  .dialog-import-questions {
    .dialog-content {
      text-align: center;
      padding: 60px 0 40px;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
}
</style>
